<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="云栖大会.css">
    <link rel="stylesheet" href="../电商网站样式清除.css">
</head>
<body>
               <!-- 顶部 -->
    <div id="topnav">
     <div class="container">
      
            <img src="img/1.png" alt="" class="world">
            <img src="img/2.png" alt="" class="title">
           
        <ul class="menu">
            <li>首页</li>
            <li>议程</li>
            <li>嘉宾</li>
            <li>指南</li>
            <li>音乐节</li>
            <li>极客派</li>
            <li>运动会</li>
            <li>合作伙伴</li>
            <li>历届回顾</li>
            <li class="buy">立即购票</li>
            <li class="english">ENGLISH</li>
        </ul>        
        </div>
    </div>

        <!-- banner图部分 -->

    <div id="banner">
    <div class="title">
       <img src="img/3.gif" alt="" class="emporwer"> 
       <img src="img/4.png" alt="" class="date">
       <a href="" class="BLUE">立即购票</a>
       </div>
    </div>
 
      <!-- moudle -->
    <div id="moudle">
    <div class="container">
       <div class="tickes">TICKES</div>  
       <div class="picket">参会门票一览</div>
       <div class="tips_anmation">
        <p class="tean1">团队折扣：单笔购买任意票种累计5张及以上，总价<span>9</span>折；10张及以上，总价<span>8</span>折</p>
        <p class="tean2">售票截止日期：<span>9.14</span></p>
        <p class="tean3">* 各类门票限量发售，售完即止</p>
        <p class="tean4">门票相关权益速览：【两场主论坛】聆听数字化未来新起点、【 ATEC大会】见证科技金融普惠价值、【百余场峰会及分论坛】洞见行业与技术新火花、【体验式展览】置身数字科技人文的和谐未来、【虾米音乐节】享受艺术与技术交融的感官盛宴</p>
       </div>

       <ul class="items">
           <li class="list1">
               <div class="submit">VIP通票 </div>
               <div class="desc"> 4DAYS  </div>
               <ul class="text_list">   
                  <li>两场主论坛及ATEC大会</li>
                  <li>四日百余场峰会及分论坛</li>
                  <li>创新展览互动体验</li>
                  <li>云栖虾米音乐节</li>
                  <li>商务午餐、VIP会客区</li>
               </ul>
               <div class="price">￥<span>5288</span>/张</div>
               <a href="" class="sale">已售罄</a>
           </li>
                 <li class="list2">
                      <div class="submit">VIP通票 </div>
               <div class="desc"> 4DAYS  </div>
               <ul class="text_list">   
                  <li>两场主论坛及ATEC大会</li>
                  <li>四日百余场峰会及分论坛</li>
                  <li>创新展览互动体验</li>
                  <li>云栖虾米音乐节</li>
                  <li>商务午餐、VIP会客区</li>
               </ul>
               <div class="price">￥<span>5288</span>/张</div>
               <a href="" class="sale">已售罄</a>
                 </li>
                 <li class="list3">
                      <div class="submit">VIP通票 </div>
               <div class="desc"> 4DAYS  </div>
               <ul class="text_list">   
                  <li>两场主论坛及ATEC大会</li>
                  <li>四日百余场峰会及分论坛</li>
                  <li>创新展览互动体验</li>
                  <li>云栖虾米音乐节</li>
                  <li>商务午餐、VIP会客区</li>
               </ul>
               <div class="price">￥<span>5288</span>/张</div>
               <a href="" class="sale">已售罄</a>
                 </li>
                 <li class="list4">
                      <div class="submit">VIP通票 </div>
               <div class="desc"> 4DAYS  </div>
               <ul class="text_list">   
                  <li>两场主论坛及ATEC大会</li>
                  <li>四日百余场峰会及分论坛</li>
                  <li>创新展览互动体验</li>
                  <li>云栖虾米音乐节</li>
                  <li>商务午餐、VIP会客区</li>
               </ul>
               <div class="price">￥<span>5288</span>/张</div>
               <a href="" class="sale">已售罄</a>
                 </li>
                 <li class="list5">
                      <div class="submit">VIP通票 </div>
               <div class="desc"> 4DAYS  </div>
               <ul class="text_list">   
                  <li>两场主论坛及ATEC大会</li>
                  <li>四日百余场峰会及分论坛</li>
                  <li>创新展览互动体验</li>
                  <li>云栖虾米音乐节</li>
                  <li>商务午餐、VIP会客区</li>
               </ul>
               <div class="price">￥<span>5288</span>/张</div>
               <a href="" class="sale">已售罄</a>
                 </li>      
       </ul>
       </div>
    </div>

           <!-- video -->
    <div id="moudle_warp">
   <!--  <video controls="controls" >
        <source src="https://cloud.video.taobao.com/play/u/10654505/p/1/e/6/t/1/50082634077.mp4?spm=a2c4e.11165380.1105370.1.381d3f8ft1YyNa&file=50082634077.mp4" >
    </video> -->
        <div class="container"> 
     <div class="watch"> 
      <h1 class="watch1"> WATCH2017</h1>
      <p>2017杭州云栖大会精彩视频</p>
     </div>
        </div>
    </div>

          <!-- frontier -->
    <div id="frontier">
    <div class="container"> 
     <ul class="explore">   
       <li class="value1">
         <h1>FRONTIER</h1>
         <p>前沿内容</p>
       </li>
       <li class="value2">
           <h2>EXPLORE FUTURE</h2>
           <h3>叩问未来价值</h3>
           <p>曾经，未来已来，只是分布得不均匀；而今，“数字蝶变”席卷全球各个领域。机器智能、物联网、行业大脑、区块链，你能想象的未来有多远？凡是过往，皆是序曲。此刻，即是新起点。</p>

       </li>
       <li class="value3">
            <h2>EXPLORE FUTURE</h2>
           <h3>叩问未来价值</h3>
           <p>曾经，未来已来，只是分布得不均匀；而今，“数字蝶变”席卷全球各个领域。机器智能、物联网、行业大脑、区块链，你能想象的未来有多远？凡是过往，皆是序曲。此刻，即是新起点。</p>

       </li>
       <li class="value4">
            <h2>EXPLORE FUTURE</h2>
           <h3>叩问未来价值</h3>
           <p>曾经，未来已来，只是分布得不均匀；而今，“数字蝶变”席卷全球各个领域。机器智能、物联网、行业大脑、区块链，你能想象的未来有多远？凡是过往，皆是序曲。此刻，即是新起点。</p>

       </li>
       <li class="value5">
            <h2>EXPLORE FUTURE</h2>
           <h3>叩问未来价值</h3>
           <p>曾经，未来已来，只是分布得不均匀；而今，“数字蝶变”席卷全球各个领域。机器智能、物联网、行业大脑、区块链，你能想象的未来有多远？凡是过往，皆是序曲。此刻，即是新起点。</p>

       </li>
       <li class="value6">
            <h2>EXPLORE FUTURE</h2>
           <h3>叩问未来价值</h3>
           <p>曾经，未来已来，只是分布得不均匀；而今，“数字蝶变”席卷全球各个领域。机器智能、物联网、行业大脑、区块链，你能想象的未来有多远？凡是过往，皆是序曲。此刻，即是新起点。</p>

       </li>
     </ul>
     </div> 
    </div>
            <!-- 动态部分 -->
    <div id="dynamic">
        <div class="container"> 
           <h1> EXHIBITION</h1>
           <h2>创新互动展览</h2>
            <ul class="image">
                <li class="big1">
                <img src="img/13.png" alt="" class="picuter1">
                <img src="img/8.png" alt="" class="picuter2">
                </li>
                <li class="big2">
                <img src="img/15.png" alt="" class="picuter1">
                <img src="img/18.png" alt="" class="picuter2">
                </li>
                <li class="big3">
                <img src="img/10.png" alt="" class="picuter1">
                <img src="img/9.png" alt="" class="picuter2">
                </li>
            </ul>
        </div>
    </div>
    // <script>
    // var image=document.querySelector(".image");
    // var lis=document.querySelectorAll(".image li")
    // for(var i=0;i<lis.length;i++){
    //     lis[i].onmouseenter=function(){
    //         this.children[1].style.display="block"
    //         this.children[0].style.display="none"
    //     }
    // }
    
    // </script>
</body>
</html>